<template>
  <div class="">
    <el-row style="padding-top: 10px" v-loading="loading">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
          <div class="title">
            诉求

            <div class="orientation">
              <ul>
                <li class="green">
                  <p><i>1</i>开始</p>
                </li>
                <em class="iconfont">&#xe687;</em>
                <li :class="topProcess >= 1 ? 'green' : '' ">
                  <p><i>2</i>已移交</p>
                </li>
                <em class="iconfont">&#xe687;</em>
                <li :class="topProcess >= 3 ? 'green' : '' ">
                  <p><i>3</i>已受理</p>
                </li>
                <em class="iconfont">&#xe687;</em>

                <li :class="topProcess >= 4 ? 'green' : '' ">
                  <p><i>4</i>已办结</p>
                </li>

                <em class="iconfont">&#xe687;</em>
                <li :class="topProcess == 7 ? 'green' : '' ">
                  <p><i>5</i>已评价</p>
                </li>

                <li style="margin-left:10px;" v-if="porcessStatus ==4" :class="porcessStatus ==4 ? 'red' : '' ">
                  <p><i style="border:none;background:none;font-size:17px;line-height:initial;" class="iconfont">&#xe637;</i>已超时
                  </p>
                </li>
              </ul>
            </div>

          </div>
          <div class="table context">
            <table>
              <tr>
                <td style="width:120px;">诉求编号</td>
                <td colspan="3">{{question_num}}</td>
                <td>诉求日期</td>
                <td colspan="3">{{addtime}}</td>
              </tr>
              <tr>
                <td>企业名称</td>
                <td colspan="3">{{company}}</td>
                <td style="width:120px;">公司地址</td>
                <td colspan="3">{{areaName}}{{villagesName}}{{address}}</td>
              </tr>
              <tr>
                <td>来源</td>
                <td>
                  <span v-if="from == 0">{{originArr[0].name}}</span>
                  <span v-if="from == 1">{{originArr[1].name}}</span>
                  <span v-if="from == 2">{{originArr[2].name}}</span>
                  <span v-if="from == 3">{{originArr[3].name}}</span>
                  <span v-if="from == 4">{{originArr[4].name}}</span>
                  <span v-if="from == 5">{{originArr[5].name}}</span>
                </td>
                <td style="width:100px;">诉求类型</td>
                <td>{{qtitle}}</td>
                <td style="width:100px;">联系人</td>
                <td>{{user}}</td>
                <td style="width:100px;">联系电话</td>
                <td>{{phone}}<span v-if="tel">&nbsp;&nbsp;座机：{{tel}}</span></td>
              </tr>
              <tr>
                <td>诉求内容</td>
                <td colspan="7">
                  <div class="conp context">
                    <p v-html="content"></p>

                  </div>
                </td>
              </tr>
              <tr v-if="supplement">
                <td>补充内容</td>
                <td colspan="7">
                  <p v-html="supplement"></p>
                </td>
              </tr>
              <tr v-if="fileList.length>0">
                <td>附件</td>
                <td colspan="7">
                  <ul>

                    <li v-for="(list,index) in fileList" :key="index">
                      <a :href="httpHome+list.url" target="_blank">{{list.name}}</a>
                    </li>

                  </ul>
                </td>
              </tr>
            </table>

          </div>

        </el-card>
        <!-- <el-card style="margin-top:50px;">
          <div class="title">解答<span class="time">2012-12-12</span></div>
          <div class="context">
            <p>00000</p>
            <el-button round size="mini" class="marbtn">提交</el-button>
          </div>


        </el-card> -->
        <el-card style="margin-top:25px;">
          <div class="title">
            受理部门：{{target}}
            <div class="rig" v-if="porcessStatus == 1 && !timeover">
              <i class="iconfont icon-tongzhi warn"></i>请在<em>{{endTime}}</em>前进行受理
            </div>
            <div class="rig" v-if="timeover && porcessStatus != 5">
              <i class="iconfont icon-shijian  red"></i>已超时<em class="red">{{day}}天{{hour}}时{{minite}}分{{second}}秒</em>请尽快处理
            </div>
            <div class="rig" v-if="porcessStatus == 2 && !timeover">
              <i class="iconfont icon-tongzhi warn"></i>已超时，请在<em>{{final_time}}</em>前进行问题办结
            </div>
            <div class="rig green" v-if="porcessStatus == 5">
              <i class="iconfont icon-zhengque green"></i>已办结
            </div>
          </div>
          <div class="step context">
            <div class="el-steps el-steps--vertical">
              <div v-for="(item,index) in progress" class="el-step is-vertical" :key="index">
                <div class="el-step__head is-process">
                  <div class="el-step__line" style="margin-right: 0px;"><i class="el-step__line-inner"
                                                                           style="transition-delay: -150ms; border-width: 0px; height: 0%;"></i>
                  </div>
                  <div class="el-step__icon is-text">
                    <!---->
                    <div class="el-step__icon-inner"></div>
                  </div>
                </div>
                <div class="el-step__main" style="margin-bottom:10px;">
                  <div class="el-step__title is-process"><span v-if="item.aname">{{item.aname}}</span><span
                    v-else>用户追问</span></div>

                  <div class="el-step__description is-process">
                    <h4>

                      <em v-if="item.type == 1" class="warn"><i class="iconfont icon-zhengque warn"></i>已流转</em>
                      <em v-else-if="item.type == 2" class="blue"><i class="iconfont icon-zhengque blue"></i>受理中</em>
                      <em v-else-if="item.type == 3" class="blue"><i class="iconfont icon-zhengque blue"></i>督办</em>
                      <em v-else-if="item.type == 0" class="red"><i class="iconfont icon-zhengque red"></i>追问</em>
                      <em v-else-if="item.type == 4" class="green"><i class="iconfont icon-zhengque green"></i>已办结</em>
                      <em v-if="item.type == 0" class="red" @click="qAnswer(item.id)"
                          style="padding-left:30px;cursor: pointer;">解答</em>
                      <span>{{item.addtime}}</span></h4>
                    <p v-html="item.content"></p>
                    <div v-if="item.children.length>0">
                      <hr style="border: 1px solid #E8E7E7;margin:5px 0;">
                      <span v-for="(list,index) in item.children" :key="index" style="display:block;">
                        {{list.answername}} : {{list.answer}}
                      </span>
                    </div>
                    <div>
                      <!-- <hr style="border: 1px solid #E8E7E7;margin:5px 0;"> -->
                      <ul v-if="item.sup_attach.length>0">
                        <h3 style="font-size:14px;">附件</h3>
                        <li v-for="(list,index) in item.sup_attach" :key="index">
                          <a :href="httpHome+list.url" target="_blank" :download="list.name">{{list.name}}</a>
                        </li>
                      </ul>
                    </div>
                  </div>

                </div>
              </div>

            </div>

          </div>
        </el-card>

      </el-col>

    </el-row>
    <!-- 通用附件+内容上传 -->
    <el-dialog :title="dialogTit" :visible.sync="dialogVisible" :before-close="closeDialog" width="40%"
               v-loading="Dialoloading">
      <el-form ref="form" label-width="120px">

        <el-form-item label="是否联系企业" v-if="tieUp">
          <el-radio-group v-model="lianxi">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="企业是否满意" v-if="tieUp">
          <el-radio-group v-model="manyi">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="dialogCon">
          <el-input type="textarea" rows="5" v-model="answer"></el-input>
        </el-form-item>
        <el-form-item label="附件" v-if="uploadFile">
          <el-upload class="upload-demo" :action="httpHome+'direct/Massage/uploadFile'" :on-success="fileSuccess"
                     :before-remove="handlemove" :file-list="fileList3">
            <el-button size="small" type="primary">上传附件</el-button>
            <div slot="tip" class="el-upload__tip">支持文档、图片、压缩包等类型文件上传</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- <el-button v-if="print" size="small" type="primary">打印</el-button> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;tieUp = false;Dialoloading = false;" size='mini'>取 消</el-button>
        <el-button type="primary" @click="dialogDone" size='mini'>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 移交或者核准弹窗 -->
    <el-dialog :title="moveTitle" :visible.sync="dialogVisibleMove" width="40%" v-loading="Dialoloading">
      <el-form style="width:100%; margin:20px;" label-width="150px" size="small">
        <el-form-item label="诉求分类">
          <el-select v-model="movegname" placeholder="诉求分类">
            <el-option v-for="(item,index) in MsgGroup" :label="item.name" :value="item.id" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <select-menu :sname="sname" ref="mesage" :options="options"
                   :dynamicValidateForm="dynamicValidateForm"></select-menu>
      <!--市级部门-->
      <select-menu :sname="sname2" ref="mesage2" :options="optionsArea"
                   :dynamicValidateForm="dynamicValidateFormArea"></select-menu>
      <!--县长热线-->
      <over-time ref="over" :times="overtime"></over-time>
      <el-form style="width:100%; margin:0px;" label-width="170px" size="small">
        <el-form-item :label="dialogCon" v-if="checkShow">
          <el-input type="textarea" rows="5" v-model="answer"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMove = false;Dialoloading = false;" size="mini">取 消</el-button>
        <el-button v-if="!isHide" type="primary" @click="dialogMove" size="mini">移 交</el-button>
        <el-button v-if="isHide" type="primary" @click="dialogCheck" size="mini">核 准</el-button>
      </span>
    </el-dialog>

    <!-- 通用信息弹窗 -->
    <el-dialog :title="alertTit" :visible.sync="dialogInfoVisible" width="40%">
      <span>{{infoCon}}</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInfoVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInfoDialog()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import actionurl from "@/assets/js/actionurl";
  import config from "@/config.js";
  import selectMenu from "@/components/selectMenu.vue";
  import overTime from "@/components/overTime.vue";

  export default {
    components: {},
    data() {
      return {
        checkShow: false,
        topProcess: [],
        tel: '',
        area: '',
        areaName: '',
        villages: '',
        villagesName: '',
        areaOptions: [],
        Dialoloading: false,
        intoType: '',
        alertTit: '',
        infoCon: '',
        dialogInfoVisible: false,
        from: "",
        originArr: [
          {
            label: "0",
            value: "0",
            name: "微信"
          },
          {
            label: "1",
            value: "1",
            name: "热线"
          },
          {
            label: "2",
            value: "2",
            name: "平台"
          },
          {
            label: "3",
            value: "3",
            name: "在线客服"
          },
          {
            label: "4",
            value: "4",
            name: "民营经济分析系统"
          },
          {
            label: "5",
            value: "5",
            name: "面对面帮扶"
          }
        ],
        transferMsg: '',
        target_num: "",
        timeover: false, //是否超时
        endTime: "", //处理时间
        final_time: "", //办结时间
        day: "",
        hour: "",
        minite: "",
        second: "",
        loading: true,
        tieUp: false, //办结单选显示控制
        lianxi: 1,
        manyi: 1,
        porcessStatus: "", //横轴状态
        proofread: 0, // 再次核准标识
        moveTitle: "移交",
        dialogVisibleMove: false,
        overtime: "",
        isHide: false,
        qtitle: "",
        movegname: "",
        httpHome: "",
        title: "",
        acceptDesc: "",
        ThisID: 0,
        print: false,
        dialogTit: "追问解答",
        dialogCon: "追问解答",
        content: "",
        supplement: "",
        company: "",
        phone: "",
        target: "",
        accepttime: "",
        user: "",
        addtime: "",
        address: "",
        progress: [],
        progressFirst: "",
        progressFirstTime: "",
        answer: "",
        anID: "",
        fileList: [],
        dialogVisible: false,
        uType: 0,
        question_num: 0,
        fileList3: [],
        uploadFile: false,

        MsgGroup: [],
        sname: "市级部门",
        sname2: "县长热线",
        dynamicValidateForm: {
          domains: [],
          selectList: [
            {
              value: "",
              id: ""
            }
          ]
        },
        options: [
          {
            value: "10",
            label: "测试部门",
            id: "11"
          },
          {
            value: "100",
            label: "测试部门2",
            id: "110"
          }
        ],
        dynamicValidateFormArea: {
          domains: [
            {
              value: "河北",
              id: "12"
            }
          ],
          selectList: [
            {
              value: "",
              id: ""
            }
          ]
        },
        optionsArea: [
          {
            value: "10",
            label: "安次区",
            id: "11"
          },
          {
            value: "101",
            label: "安次区2",
            id: "111"
          }
        ]
      };
    },
    components: {
      selectMenu,
      overTime
    },
    methods: {
      printText() {
        // 打印
        var _this = this;
        console.log(_this.ThisID)
        actionurl.printContent({
          id: _this.ThisID
        }, function (re) {
          console.log(re)
          var data = re.data
          if (data.transfer_msg == null) {
            _this.transferMsg = '无';
          } else {
            _this.transferMsg = data.transfer_msg;
          }

          var mywindow = window.open('', 'PRINT', 'height=900px,width=1200px');
          // var mywindow = window.open('', 'PRINT');
          mywindow.document.write('<html><head><title>' + document.title + '</title>');
          mywindow.document.write('</head><body id="printb" style="margin: 0px 50px">');
          mywindow.document.write('<h1 style="font-size:20px;font-weight:normal;text-align:center;">诉求交办单</h1>');
          mywindow.document.write('<div style="font-size:15px;font-weight:normal;margin: 0px 10px;height: 30px"><span style="float: left;">编号：（2018）2号</span><span style="float: right;">' + '日期：' + data.date + '</span></div>');
          mywindow.document.write('<style>td,th{font-size: 12px;border:1px solid #bbb;line-height: 34px;padding: 0 5px;}table{border-collapse: collapse;border-spacing: 0;width:98%;margin:0 auto;}th{background: #f00;}th{background:#f2f2f2;}@page { size:A4 portrait; }</style>');
          mywindow.document.write('<table>');
          mywindow.document.write('<tr><th style="width: 100px;height: 70px; font-size: 15px;">企业名称</th><td colspan="3" style="height: 70px; font-size: 15px; padding: 0 30px">' + data.company + '</td></tr>')
          mywindow.document.write('<tr><th style="width: 100px;height: 70px; font-size: 15px;">联系人</th><td style="height: 70px; font-size: 15px; padding: 0 30px">' + data.user + '</td><th style="width: 100px;height: 70px; font-size: 15px;">联系电话</th><td style="height: 70px; font-size: 15px;padding: 0 30px">' + data.phone + '</td></tr>')
          mywindow.document.write('<tr><th style="width: 100px;height: 200px; font-size: 15px;">诉求内容</th><td colspan="3" style="height: 200px; font-size: 15px; padding: 0 30px">' + data.content + '</td></tr>')
          mywindow.document.write('<tr><th style="width: 100px;height: 70px; font-size: 15px;">交办单位</th><td style="height: 70px; font-size: 15px; padding: 0 30px">廊坊市民营经济领导小组办公室</td><th style="width: 100px;height: 70px; font-size: 15px;">联系电话</th><td style="height: 70px; font-size: 15px;padding: 0 30px">' + 2338030 + '</br>' + 2338085 + '</td></tr>')
          mywindow.document.write('<tr><th style="width: 100px;height: 70px; font-size: 15px;">承办单位</th><td style="height: 70px; font-size: 15px; padding: 0 30px">' + data.user_name + '</td><th style="width: 100px;height: 70px; font-size: 15px;">联系电话</th><td style="height: 70px; font-size: 15px; padding: 0 30px">' + data.user_phone + '</td></tr>')
          mywindow.document.write('<tr><th style="width: 100px;height: 120px; font-size: 15px;">备注</th><td colspan="3" style="height: 120px; font-size: 15px; padding: 0 30px">' + _this.transferMsg + '</td></tr>')
          mywindow.document.write('</table>');
          mywindow.document.write('</body></html>');
          mywindow.document.close(); // necessary for IE >= 10
          mywindow.focus(); // necessary for IE >= 10*/
          mywindow.print.portrait = true;
          // console.log(mywindow)
          // mywindow.print.header = "This is MeadCo";
          mywindow.print();
          mywindow.close();
          return true;
        })
      },
      outFile() {
        // 导出
        var _this = this;
        console.log(_this.ThisID)
        $("#out").attr("href", actionurl.baseUrl+"direct/Massageadmin/derived/id/" + _this.ThisID);
      },
      getAreaList() {//获取地区接口
        var _this = this;
        actionurl.getDirectArea({}, function (re) {
            _this.areaOptions = re.data.children;
            if (_this.area) {
              var areaArr = re.data.children.filter(item => item.value == _this.area)[0];
              _this.areaName = areaArr.label;
              _this.villagesName = areaArr.children.filter(item => item.value == _this.villages)[0].label;
            }

            // console.log(_this.areaName,_this.villagesName);
          }
        );
      },
      //删除此项
      delList() {
        this.dialogInfoVisible = true;
        this.alertTit = '删除';
        this.infoCon = "确认删除吗？"
      },
      //确定删除
      submitInfoDialog() {
        this.delListFnUrl();
      },
      //删除接口
      delListFnUrl() {//列表删除事件
        var _this = this;
        actionurl.QuserDelete({ //删除按钮事件
          id: _this.ThisID
        }, function (re) {
          if (re.status == 1) {
            _this.dialogInfoVisible = false;
            _this.$message(re.msg);
            _this.$router.go(-1);
          } else {
            _this.$message(re.msg);
          }
        });
      },
      //弹窗关闭前
      closeDialog(done) {
        this.$confirm("确认关闭？")
          .then(_ => {
            done();
            this.tieUp = false;
          })
          .catch(_ => {
          });
      },
      concludeUrlFn() {
        var _this = this;
        actionurl.conclude(
          {
            id: _this.ThisID,
            lianxi: _this.lianxi,
            manyi: _this.manyi,
            content: _this.answer,
            sup_attach: JSON.stringify(_this.fileList3)
          },
          function (re) {
            _this.$message({
              message: re.message,
              type: "warning"
            });
            _this.Dialoloading = false;
            _this.dialogVisible = false;
            _this.$refs["form"].resetFields();
            if (re.status == 1) {
              _this.detailInfo();
              _this.$message({
                message: "处理成功",
                type: "success"
              });
              _this.fileList3 = [];
              _this.dialogVisible = false;
            } else {
              _this.$message({
                message: re.message,
                type: "warning"
              });
            }
          }
        );
      },
      countTime() {
        //计时效果
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var endDate = new Date(this.endTime); //受理截至时间
        var finalDate = new Date(this.final_time); //办结截至时间

        // console.log(endDate.getTime());
        var end = endDate.getTime();
        //时间差
        var leftTime = now - end;
        //定义变量 d,h,m,s保存倒计时的时间
        if (leftTime >= 0) {
          this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
          this.hour = Math.floor((leftTime / 1000 / 60 / 60) % 24);
          this.minite = Math.floor((leftTime / 1000 / 60) % 60);
          this.second = Math.floor((leftTime / 1000) % 60);
        }

        if (this.porcessStatus == 1) {
          //如果是受理前
          now - endDate.getTime() > 0
            ? (this.timeover = true)
            : (this.timeover = false);
        }
        if (this.porcessStatus == 2) {
          //如果是办结前
          now - finalDate.getTime() > 0
            ? (this.timeover = true)
            : (this.timeover = false);
        }
        // console.log(this.m);
        //递归每秒调用countTime方法，显示动态时间效果
        setTimeout(this.countTime, 1000);
      },
      shouliFn() {
        // 受理弹窗
        this.dialogVisible = true;
        this.uploadFile = true;
        this.dialogTit = "受理";
        this.dialogCon = "受理内容";
        this.print = true;
        this.answer = '';
        this.tieUp = false;
      },
      shouliFnUrl() {
        //受理接口
        var _this = this;
        actionurl.ShouLiOption(
          {
            id: _this.ThisID,
            content: _this.answer,
            sup_attach: JSON.stringify(_this.fileList3)
          },
          function (re) {
            _this.Dialoloading = false;
            _this.dialogVisible = false;
            if (re.status == 1) {
              _this.detailInfo();
              _this.$message({
                message: "受理成功",
                type: "success"
              });
              _this.fileList3 = [];

            } else {
              _this.$message({
                message: re.msg,
                type: "warning"
              });
            }
          }
        );
      },
      shensuFn() {
        // 申诉弹窗
        this.dialogVisible = true;
        this.uploadFile = true;
        this.dialogTit = "申诉";
        this.dialogCon = "申诉内容";
        this.answer = '';
      },
      shensuFnUrl() {
        // 申诉接口
        var _this = this;
        actionurl.ShenSuOption(
          {
            id: _this.ThisID,
            remarks: _this.answer,
            sup_attach: JSON.stringify(_this.fileList3)
          },
          function (re) {
            _this.Dialoloading = false;
            if (re.status == 1) {
              _this.detailInfo();
              _this.$message({
                message: "申诉成功",
                type: "success"
              });
              _this.fileList3 = [];
              _this.dialogVisible = false;
            } else {
              console.log(re.data);
              _this.$message({
                message: re.message,
                type: "warning"
              });
            }
          }
        );
      },
      EditFn() {
        this.$router.push({
          path: "/questionEdit/" + this.ThisID
        });
      },
      Transfer() {
        //移交按钮弹窗

        this.GetTargetList();
        this.dialogVisibleMove = true;
        this.GetMovedetailInfo();
        this.isHide = false;
      },
      GetMovedetailInfo() {
        //获取移交详情信息
        var _this = this;
        console.log(_this.ThisID);
        actionurl.MgetTransferInfo(
          {
            //获取移交的诉求详细信息
            id: _this.ThisID
          },
          function (re) {
            if (re.status == 1) {
              // console.log(re.data.city);
              _this.dynamicValidateForm = {
                domains: re.data.city,
                selectList: [
                  {
                    value: "选择",
                    id: "0"
                  }
                ]
              };
              _this.dynamicValidateFormArea = {
                domains: re.data.county,
                selectList: [
                  {
                    value: "选择",
                    id: "0"
                  }
                ]
              };

              _this.movegname = re.data.group;
              _this.overtime = re.data.final_time;
              _this.GetMsgGroup();
            } else {
              _this.$message(re.msg);
            }
          }
        );
      },
      GetTargetList() {
        //获取区县以及市级下拉菜单获取
        var _this = this;
        actionurl.targetListByType({}, function (re) {
          _this.options = re.data.city;
          _this.optionsArea = re.data.county;
        });
      },
      GetMsgGroup() {
        //获取诉求分类
        var _this = this;
        actionurl.MessageGroup(
          {
            mesgroup: 1, //0-面对面等分类 1-八大类
            fid: 1
          },
          function (re) {
            console.log(re);
            _this.MsgGroup = re.data;
          }
        );
      },
      dialogMove() {
        //移交操作接口
        this.Dialoloading = true;
        var _this = this;
        actionurl.MuserTransfer(
          {
            //获取移交的诉求详细信息
            id: _this.ThisID,
            group: _this.movegname,
            city: _this.$refs.mesage.getContent().join(","),
            county: _this.$refs.mesage2.getContent().join(","),
            final_time: _this.$refs.over.getContent()
          },
          function (re) {
            _this.Dialoloading = false;
            _this.$message(re.msg);
            if (re.status == 1) {
              _this.detailInfo();
              _this.dialogVisibleMove = false;
            } else {

            }
          }
        );
      },
      checkFn() {
        //核准弹窗按钮
        this.moveTitle = "核准";
        this.GetTargetList();
        this.dialogVisibleMove = true;
        this.GetMovedetailInfo();
        this.isHide = true;
        this.checkShow = true;
        this.dialogCon = '受理意见';
      },
      //核准接口
      checkFnUrl() {
        if (
          this.$refs.mesage.getContent().length == 0 &&
          this.$refs.mesage2.getContent().length == 0
        ) {
          this.$message.error("请选择县长热线或者请选择市级部门");
          return;
        }
        var _this = this;
        actionurl.MyxTransfer(
          {
            //核准接口
            id: _this.ThisID,
            group: _this.movegname,
            city: _this.$refs.mesage.getContent().join(","),
            county: _this.$refs.mesage2.getContent().join(","),
            final_time: _this.overtime,
            content: _this.answer
          },
          function (re) {
            _this.Dialoloading = false;
            _this.$message(re.msg);
            if (re.status == 1) {

              _this.dialogVisibleMove = false;
              _this.detailInfo();
            } else {

            }
          }
        );
      },
      dialogCheck() {
        this.Dialoloading = true;
        //核准操作接口
        if (this.moveTitle == "核准") {
          this.checkFnUrl();
        } else if (this.moveTitle == "再次核准") {
          this.reCheckFnUrl();
        }
      },
      reCheckFn() {
        //再次核准操作
        this.dialogVisibleMove = true;
        this.moveTitle = "再次核准";
        this.GetTargetList();
        this.GetMovedetailInfo();
        this.dialogCon = '受理意见';

        this.isHide = true;
      },
      //再次核准接口
      reCheckFnUrl() {
        if (
          this.$refs.mesage.getContent().length == 0 &&
          this.$refs.mesage2.getContent().length == 0
        ) {
          this.$message.error("请选择县长热线或者请选择市级部门");
          return;
        }
        var _this = this;
        actionurl.reTransfer(
          {
            //核准接口
            id: _this.ThisID,
            group: _this.movegname,
            city: _this.$refs.mesage.getContent().join(","),
            county: _this.$refs.mesage2.getContent().join(","),
            final_time: _this.overtime,
            content: _this.answer
          },
          function (re) {
            _this.Dialoloading = false;
            if (re.status == 1) {
              _this.$message(re.msg);
              _this.dialogVisibleMove = false;
              _this.detailInfo();
            } else {
              _this.$message(re.msg);
            }
          }
        );
      },
      goBackTo() {//退回事件
        this.dialogVisible = true;
        this.uploadFile = false;
        this.dialogTit = "退回";
        this.dialogCon = "退回意见";
      },
      goBackFnUrl() {
        //退回事件接口
        var _this = this;
        actionurl.goBackToYY(
          {
            id: _this.ThisID,
            back_msg: _this.answer
          },
          function (re) {
            _this.Dialoloading = false;
            _this.$message(re.msg);
            _this.dialogVisible = false;
            if ((re.status = 1)) {
              _this.detailInfo();
            }
          }
        );
      },
      Conclude() {
        //办结弹窗
        this.$confirm("点击【办结】会强制办结本诉求")
          .then(_ => {

            console.log(123);
            // this.tieUp = false;
            this.dialogVisible = true;
            this.uploadFile = true;
            this.dialogTit = "强制办结";
            this.dialogCon = "办结内容";
            this.answer = '';
            done();
          })
          .catch(_ => {
          });

      },
      ConcludeFnUrl() {
        //结接口
        var _this = this;
        actionurl.forceConclude(
          {
            id: _this.ThisID,
            sup_attach: JSON.stringify(_this.fileList3),
            content: _this.answer
          },
          function (re) {
            _this.Dialoloading = false;
            if ((re.status = 1)) {
              _this.$message(re.msg);
              _this.dialogVisible = false;
              _this.detailInfo();
            } else {
              _this.$message(re.msg);
              _this.dialogVisible = false;
            }
          }
        );
      },
      dubanFn() {
        //督办弹窗
        this.dialogVisible = true;
        this.uploadFile = true;
        this.dialogTit = "督办";
        this.dialogCon = "督办内容";
        this.answer = '';
      },
      SuperviseSubmit() {
        //督办接口
        var _this = this;
        actionurl.Qsupervise(
          {
            id: _this.ThisID,
            sup_attach: JSON.stringify(_this.fileList3),
            content: _this.answer
          },
          function (re) {
            _this.Dialoloading = false;
            if ((re.status = 1)) {
              _this.$message(re.msg);
              _this.dialogVisible = false;
              _this.detailInfo();
            } else {
              _this.$message(re.msg);
              _this.dialogVisible = false;
            }
          }
        );
      },

      fileSuccess(event, file, fileList) {
        var obj = {};
        obj.name = file.name;
        obj.url = file.response.data.path;
        this.fileList3.push(obj);
      },
      doneFn() {
        this.dialogVisible = true;
        this.dialogTit = "运营人员受理";
        this.dialogCon = "受理内容";
        this.uploadFile = true;
        // this.print = true;
      },
      yyShouliFnUrl() {//运营人员受理接口
        var _this = this;
        actionurl.yyAccept(
          {
            id: _this.ThisID,
            content: _this.answer,
            sup_attach: JSON.stringify(_this.fileList3)
          },
          function (re) {
            _this.Dialoloading = false;
            _this.dialogVisible = false;
            if (re.status == 1) {
              _this.detailInfo();
              _this.$message({
                message: "受理成功",
                type: "success"
              });
              _this.fileList3 = [];

            } else {
              _this.$message({
                message: re.msg,
                type: "warning"
              });
            }
          }
        );
      },
      handlemove(file, fileList) {
        // this.fileList3 = fileList;

        this.loading = true;
        var data = this.fileList3.filter(function (item) {
          return item.uid == file.uid;
        });
        this.fileList3.del(function (obj) {
          return obj.uid == data;
        });
        var _this = this;
        _this.fileRemove(file, _this.fileList3);
      },
      fileRemove(file, fileList) {
        var _this = this;
        actionurl.delfile(
          {
            file: file.url
          },
          function (re) {
            if ((re.status = 1)) {
              _this.$message(re.msg);
            } else {
              _this.$message(re.msg);
            }
          }
        );
      },
      ShouLiOptionFn() {
        //主内容解答接口
        var _this = this;
        actionurl.ShouLiOption(
          {
            id: _this.ThisID,
            content: _this.answer,
            sup_attach: JSON.stringify(_this.fileList3)
          },
          function (re) {
            _this.Dialoloading = false;
            if (re.status == 1) {
              _this.dialogVisible = false;
              _this.detailInfo();
              _this.$message(re.msg);
              _this.fileList3 = [];
            } else {
              _this.$message({
                message: re.msg,
                type: "warning"
              });
            }
          }
        );
      },
      detailInfo() {
        //获取详情
        var _this = this;
        actionurl.MessageDetail(
          {
            question_num: _this.$route.params.id
          },
          function (re) {
            console.log(re, "000000")
            _this.loading = false;
            if (re.status == 1) {
              _this.title = re.data.message.title;
              _this.company = re.data.message.company;
              _this.user = re.data.message.user;
              _this.phone = re.data.message.phone;
              _this.tel = re.data.message.tel;
              _this.accepttime = re.data.message.accepttime;
              _this.addtime = re.data.message.addtime;
              _this.target = re.data.message.target;
              _this.content = re.data.message.content;
              _this.supplement = re.data.message.supplement;
              _this.qtitle = re.data.message.gname;
              _this.progress = re.data.progress;
              _this.address = re.data.message.address;
              _this.proofread = re.proofread;
              _this.porcessStatus = re.data.message.status;
              _this.endTime = re.data.message.TimeAccept;
              _this.final_time = re.data.message.final_time;
              _this.target_num = re.data.message.target_num;
              _this.from = re.data.message.from;
              _this.area = re.data.message.area;
              _this.villages = re.data.message.villages;
              _this.topProcess = re.data.message.progress;
              _this.countTime();
              _this.getAreaList();
              // console.log(JSON.parse(re.data.message.attach));
              if (re.data.message.attach !== "") {
                _this.fileList = JSON.parse(re.data.message.attach);
              } else {
                _this.fileList = [];
              }
              _this.ThisID = re.data.message.id;
            } else {
              _this.$message(re.msg);
            }
          }
        );
      },
      qAnswer(id) {
        //流程轴解答
        this.anID = id;
        this.dialogVisible = true;
        this.dialogTit = "追问解答";
      },
      answerDo() {
        //流程轴解答接口
        var _this = this;
        actionurl.questionAnswer(
          {
            flow_id: _this.anID,
            answer: _this.answer
          },
          function (re) {
            if (re.status == 1) {
              _this.dialogVisible = false;
              _this.detailInfo();
              _this.fileList3 = [];
            } else {
              _this.$message(re.msg);
            }
          }
        );
      },
      dialogDone() {
        this.Dialoloading = true;
        if (this.dialogTit == "解答") {
          this.ShouLiOptionFn();
        } else if (this.dialogTit == "督办") {
          this.SuperviseSubmit();
        } else if (this.dialogTit == "申诉") {
          this.shensuFnUrl();
        } else if (this.dialogTit == "受理") {
          this.shouliFnUrl();
        } else if (this.dialogTit == "运营人员受理") {
          this.yyShouliFnUrl();
        } else if (this.dialogTit == "办结") {
          this.concludeUrlFn();
          // this.$message();
        } else if (this.dialogTit == "退回") {
          this.goBackFnUrl();
        } else if (this.dialogTit == "强制办结") {
          this.ConcludeFnUrl();
        } else {
          this.answerDo();
        }
      },
      doneOver() {
        this.dialogVisible = true;
        this.tieUp = true;
        this.uploadFile = true;
        this.dialogTit = "办结";
        this.dialogCon = "办结方案";
        this.answer = '';
      },
      getUserinfo() {
        //获取用户信息
        var _this = this;
        actionurl.getUserInfo({}, function (re) {
          _this.uType = re.userType;

          // _this.MessageList();
        });
      }
    },
    created() {
      this.detailInfo();
      this.getUserinfo();
      this.httpHome = config.URLWEBHTTP;
      this.question_num = this.$route.params.id;
      this.intoType = this.$route.params.type;
      // $('.orientation ul li.green').last().removeClass('green').addClass('warn');
    }
  };
</script>

<style lang="scss" scoped>
  .context {
    padding: 0 30px 20px;

    h3 {
      // margin-bottom: 13px;
      font-size: 20px;
      font-weight: normal;
    }

    p {
      font-size: 14px;
      line-height: 24px;
    }

    .tips {
      color: #999;
      font-size: 14px;
      display: inline-block;
      padding-bottom: 30px;
    }
  }

  .marbtn {
    margin-top: 15px;
  }

  .title {
    // justify-content: flex-start;
  }

  .step {
    min-eight: 580px;
    padding-left: 30px;
  }

  .el-step__description {
    border: 1px solid #e8e7e7;
    display: inline-block;
    border-radius: 10px;
    padding: 15px;
    width: 440px;
    color: #999;

    h4 {
      font-size: 14px;
      color: #666;
      height: 22px;
      font-weight: normal;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      margin-bottom: 15px;
      overflow: hidden;
      position: relative;

      em {
        display: flex;
        align-items: center;
      }

      span {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }

  .el-step__title.is-process {
    color: #333;
    font-weight: normal;
  }

  .el-step__icon {
    // background: #999;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
  }

  .el-step.is-vertical .el-step__line {
    left: 7px;
  }

  .el-step__icon.is-text {
    border: none;
    background: #999;
  }

  .el-step:last-of-type .el-step__icon.is-text {
    background: #999;
  }

  .el-step:first-of-type .el-step__icon.is-text {
    background: green;
  }

  .el-step:last-of-type .el-step__description,
  .el-step:last-of-type .el-step__main {
    padding-right: 15px;
  }

  .el-step__description {
    margin: 10px 0;
  }

  // .el-steps {
  //   display: initial;
  // }

  .el-step.is-vertical .el-step__title {
    line-height: 18px;
    // padding-bottom:
  }

  ul {
    // padding-top: 20px;
    li {
      a {
        color: #333;
        font-size: 12px;
        line-height: 26px;
      }
    }
  }

  .table table {
    width: 100%;

    ul {
      margin-top: 0;
      padding-top: 0;
      line-height: 22px;
    }

    td {
      border: 1px solid #ebeef5;
      line-height: 40px;
      padding: 0 10px;
      font-size: 14px;
    }
  }

  .conp {
    padding: 15px 0;

    p {
      line-height: 26px;
    }
  }

  .orientation {
    ul {
      width: 100%;
      display: flex;

      .iconfont {
        color: #999;
        margin-right: 0;
        font-size: 14px;
        line-height: 45px;
      }

      li {
        // border: 1px solid #dddddd;
        // background: #f5f5f5;
        width: 95px;
        height: 45px;
        box-sizing: border-box;
        font-size: 14px;

        &:nth-last-child(1) {
          // margin-left: 20px;
          &:after {
            display: none;
          }

          &:before {
            display: none;
          }
        }

        // &:nth-last-child(2) {
        //   &:after {
        //     display: none;
        //   }
        //   &:before {
        //     display: none;
        //   }
        // }
        &.red {
          i {
            color: #ff0000;
            border-color: #ff0000;
            background: #ff0000;
          }

          p {
            color: #ff0000;
          }
        }

        &.warn {
          i {
            color: #fff;
            border-color: #ffab51;
            background: #ffab51;
          }

          p {
            color: #ffab51;
          }
        }

        &.green {
          i {
            color: #fff;
            border-color: #6bd73c;
            background: #6bd73c;
          }

          p {
            color: #6bd73c;
          }
        }

        p {
          // position: absolute;
          // width: 100%;
          // height: 100%;
          // left: 0;
          // top: 0;
          line-height: 45px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        color: #999999;
        position: relative;

        &:nth-child(1) {
          z-index: 99;
        }

        &:nth-child(2) {
          z-index: 88;
        }

        &:nth-child(3) {
          z-index: 77;
        }

        // &:nth-child(4){
        //   z-index: 66;
        // }
        // &:nth-child(5){
        //   z-index: 55;
        // }
        // &:before {
        //   content: "";
        //   position: absolute;
        //   left: 2px;
        //   top: 0;
        //   width: 100%;
        //   height: 100%;
        //   background: #f5f5f5;
        // }
        // &:after {
        //   right: -18px;
        //   top: 22px;
        //   content: "";
        //   width: 30px;
        //   height: 29px;

        //   position: absolute;

        //   border-left: 2px solid #ddd;

        //   border-bottom: 2px solid #ddd;

        //   -webkit-transform: translate(0, -50%) rotate(-135deg);

        //   transform: translate(0, -50%) rotate(-135deg);
        //   background: #f5f5f5;
        // }

        i {
          display: inline-block;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #999999;
          text-align: center;
          line-height: 18px;
          margin-right: 5px;
          color: #999999;
          font-size: 14px;
        }
      }
    }

    padding: 0 30px;
  }

  .table table tr td {
    border: 1px solid #dddddd;

    &:nth-child(odd) {
      background: #f5f5f5;
    }
  }

  #out {
    font-size: 12px;
    width: 100px;
    height: 40px;
    color: white;
    padding: 9px 30px;
    background: #0080cd;
    text-align: center;
    border-radius: 2px;
    margin-left: 10px;
  }

  #out:hover {
    background: #1f365e;
    color: #fff;
    border-radius: 2px;
  }
</style>
